<template>
  <div class="page-container pad-t-20">
    <el-tabs v-model="notice.readFlag" @tab-click="readFlagClick">
      <el-tab-pane :label="labels['全部消息']" name="-1"> </el-tab-pane>
      <el-tab-pane :label="labels['未读消息']" name="0"> </el-tab-pane>
      <el-tab-pane :label="labels['已读消息']" name="1"> </el-tab-pane>
    </el-tabs>
    <div>
      <div>&nbsp;
        <el-button class="float-r" @click="updateAllAsRead">全部标为已读</el-button>
      </div>
      <div  v-for="(item, index) in noticeList" :key="index" class="tip" :class="item.readFlag == 1 ? '' : item.leftColor">
        <div>
          <span class="font-w font-20">{{dict.noticeType[item.noticeType]}}</span>
          <span class="float-r font-20">{{item.createTime}}</span>
        </div>
        <p class="font-16 font-gray">{{item.noticeDetail}}<a><span class="font-blue mar-l-20" @click="showDetail(item)">查看详情</span></a></p>
      </div>
    </div>
    <div class="pagination">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="searchListQuery.currentPage"
                     :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>


<style scoped>
  .page-container {
    padding: 20px 20px 20px 20px;
  }
  .page-container .tip {
    padding: 8px 16px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 20px 0;
  }
  .page-container .left-color-primary {
    border-left: 5px solid #409eff;
  }
  .page-container .left-color-success {
    border-left: 5px solid #67c23a;
  }
  .page-container .left-color-danger {
    border-left: 5px solid #f56c6c;
  }
  .page-container p {
    font-size: 14px;
    color: #5e6d82;
    line-height: 1.5em;
  }
</style>

<script>
  import { getNameByPath } from '@/utils/get-name-by-path' // 不要删除，根据URL获取文件名
  import { pageNotice, statNotice, save, updateAllAsRead, getUnreadNum } from '@/api/user/notice'

  export default {
    name: getNameByPath(),
    data() {
      return {
        labels: {
          '全部消息': '全部消息(0)',
          '未读消息': '未读消息(0)',
          '已读消息': '已读消息(0)'
        },
        notice: {
          readFlag: '-1'
        },
        dict: {
        },
        total: 0,
        noticeList: [],
        showFlag: 0,
        leftColorPrimary: 'left-color-primary',
        leftColorSuccess: 'left-color-success',
        leftColorDanger: 'left-color-danger',
        searchListQuery: {},
        defaultQuery: {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10
        }
      }
    },
    // 初始化页面
    created() {
      this.searchListQuery = { ...this.defaultQuery }
      this.init()
    },
    methods: {
      init() {
        const currentPage = this.searchListQuery.currentPage
        const size = this.searchListQuery.size
        this.searchListQuery = { ... this.defaultQuery }
        this.searchListQuery.currentPage = currentPage
        this.searchListQuery.size = size
        if (this.notice.readFlag === '-1') {
          this.searchListQuery.readFlag = ''
        } else {
          this.searchListQuery.readFlag = this.notice.readFlag
        }
        pageNotice(this.searchListQuery).then(response => {
          if (response.isError) return
          this.noticeList = response.data.records
          this.noticeList.forEach(notice => {
            switch (notice.noticeType) {
              default:
              case 40:
                notice.leftColor = this.leftColorPrimary
                break
              case 11:
              case 21:
              case 31:
                notice.leftColor = this.leftColorSuccess
                break
              case 10:
              case 20:
              case 22:
              case 30:
                notice.leftColor = this.leftColorDanger
                break
            }
          })
          this.total = response.data.total
          this.dict = response.data.dict
        })
        statNotice({ enterpriseId: this.getEnterpriseId() }).then(response => {
          if (response.isError) return
          this.labels['全部消息'] = '全部消息(' + (response.data['total'] ? response.data['total'] : 0) + ')'
          this.labels['未读消息'] = '未读消息(' + (response.data['0'] ? response.data['0'] : 0) + ')'
          this.labels['已读消息'] = '已读消息(' + (response.data['1'] ? response.data['1'] : 0) + ')'
        })
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.init()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.init()
      },
      readFlagClick() {
        this.searchListQuery.currentPage = 1
        this.init()
      },
      showDetail(item) {
        item.readFlag = 1
        save(item)
        this.updateUnreadNotice()
        switch (item.noticeType) {
          // 通知类型 10：余额充值失败 11：余额充值成功 20：酬金托管部分完成 21：酬金托管全部完成 22：酬金托管重发 30：发票申请未通过 31：发票申请通过 40：微客资料变动',
          case 10:
          case 11:
            this.$router.push({ path: '/finace/enterprise-recharge/index' })
            break
          case 20:
          case 21:
          case 22:
            this.$router.push({ path: '/reward/work-reward-detail/index?workId=' + item.detailId })
            break
          case 30:
          case 31:
            this.$router.push({ path: '/invoice/invoice-manage/detail/index?invoiceApplyId=' + item.detailId })
            break
          case 40:
            this.$router.push({ path: '/member/my-member/index' })
            break
          default:
            break
        }
      },
      updateUnreadNotice() {
        getUnreadNum(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.$bus.$emit('updateUnreadNotice', response.data)
        })
      },
      updateAllAsRead() {
        updateAllAsRead(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.$message({
            type: 'success',
            message: '更新成功!'
          })
          this.updateUnreadNotice()
        })
      }
    },
    mounted() {
    }
  }
</script>
